﻿/// <reference path="../Libriries/jquery-2.0.3.js" />
/// <reference path="../Libriries/q.js" />
/// <reference path="class.js" />

var PopUpMaker = (function () {
    var EXIT_ICON_PATH = "../Resources/Images/PopUp/btn-pop-up-exit.png";
    var EXIT_ICON_PATH_MO = "../Resources/Images/PopUp/btn-pop-up-exitM.png";

    var COVER_STYLE = {
        'width': '100%',
        'min-height': '100%',
        'background-color': 'rgba(0,0,0,0.5)',
        'position': 'fixed',
        'top': '0px',
        'margin': '0px',
        'z-index': '1'
    }

    var BTN_EXIT_STYLE = {
        'position': 'absolute',
        'right': '20px',
        'top': '20px',
        'width': '65px',
        'height': '50px',
        'background-image': 'url(' + EXIT_ICON_PATH + ')'
    }

    var ExitHasMO = true;

    var PopUp = Class.create({
        init: function () {
            var self = this;
            this.animation = false;

            this.holder;

            this.cover = $("<div id='cover'></div>");
            this.cover.css(COVER_STYLE);

            this.btnExit = $("<a href='#' id='btn-exit' title='close'></a>");
            this.btnExit.css(BTN_EXIT_STYLE);
            if (ExitHasMO) {
                this.btnExit.hover(function () {
                    self.btnExit.css({
                        'background-image': 'url(' + EXIT_ICON_PATH_MO + ')'
                    });
                },
                function () {
                    self.btnExit.css({
                        'background-image': 'url(' + EXIT_ICON_PATH + ')'
                    });
                });
            }
            this.btnExit.click(function () {
                if (self.animation) {
                    self.removeWithAnimation();
                }
                else {
                    self.remove();
                }
            });

            this.content = $("<div id='pop-up-content'></div>");

            this.cover.append(this.btnExit);
            this.cover.append(this.content);
        },
        render: function (selector) {
            this.holder = $(selector);
            this.holder.append(this.cover);
        },
        renderWithAnimation: function(selector) { 
            this.cover.css({
                'display': 'none'
            });
            
            this.render(selector);
            $(this.cover).fadeIn(500);

            this.animation = true;
        },
        remove: function () {
            $(this.cover).remove();
        },
        removeWithAnimation: function () {
            this.cover.fadeOut(500, function () {
                this.remove();
            });
        }
    });

    return {
        MakePopUp: function () {
            return new PopUp();
        }
    }
}());

